<template>
  <div class="footer">
    <router-link v-for="item in list" :key="item.href" :to="item.href" :style="item.select ? 'color: #409eff' : ''">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="'#' + item.icon"></use>
      </svg>
      <p>{{ item.name }}</p>
    </router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
let list = ref([
  {
    name: '首页',
    icon: 'eld-shouye',
    href: '/index'
  },
  {
    name: '购物车',
    icon: 'eld-gouwu',
    href: '/basket'
  },
  {
    name: '消息',
    icon: 'eld-kefu',
    href: '/message'
  },
  {
    name: '我的',
    icon: 'eld-wode',
    href: '/my'
  }
])
let router = useRouter()
let path = router.currentRoute.value.path
function changeRouter(cuuRouter) {
  list.value.forEach((v, k) => {
    if (v.href === cuuRouter) {
      v.select = true
      console.log(v.name)
    } else {
      v.select = false
    }
    return v
  })
}
changeRouter(path)

onBeforeRouteUpdate((on) => {
  changeRouter(on.path)
})
</script>

<style lang='less' scoped>
.icon {
  width: 23px;
  height: 23px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.footer {
  background-color: #fff;
  height: 50px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
  text-align: center;
  a {
    font-size: 11px;
    text-decoration: none;
    color: #737373;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
  }
}
</style>
